<template>
  <el-select
    ref="remoteSearch"
    filterable
    remote
    :clearable="false"
    remote-show-suffix
    reserve-keyword
    :remote-method="remoteMethod"
    @mousewheel="mouseWheel"
    @input.enter="input"
    :style="{ width: width }"
    placeholder="请选择"
    @change="change($event)"
    @blur="blurSelect"
    :disabled="props.disabled"
    :max-collapse-tags="maxCollapseTags"
    :multiple="multiple"
    collapse-tags
    collapse-tags-tooltip
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.name"
      :value="item.id"
    >
      <span class="name">{{ item.name }} - {{ item.orgName }}</span>
    </el-option>
    <div v-show="loading" class="loading" v-loading="loading"></div>
    <div
      v-if="!loading && currentPageData.length > 0"
      ref="moreDiv"
      class="search-keyword"
    >
      <span @click="loadMore">加载更多...</span>
    </div>
    <div v-if="currentPageData.length == 0" class="search-keyword-bottom">
      <span>到底啦~</span>
    </div>
  </el-select>
</template>

<script>
export default {
  name: 'Select'
}
</script>

<script setup>
import { debounce } from '@/utils/debounce.js'
import { get_zyz_list_select } from '@/api/basicSetting'
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus,
  Warning
} from '@element-plus/icons-vue'

const props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  value: {
    default: '',
    type: String
  },
  disabled: {
    type: Boolean,
    default: false
  },
  maxCollapseTags: {
    type: [String, Number],
    default: 5
  },
  multiple: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['change', 'update:value'])
const options = ref([])
const selectValue = ref('')
const selected = ref('')
const loading = ref(false)
const remoteSearch = ref(null)
const currentPageData = ref([])
const state = reactive({
  search: {
    pageNum: 1,
    pageSize: 20
  }
})

const loadMore = () => {
  state.search.pageNum += 1
  getOrgList()
}

const mouseWheel = () => {
  if (
    remoteSearch.value &&
    remoteSearch.value.$refs &&
    remoteSearch.value.$refs.scrollbar
  ) {
    const scrollHeight = Math.round(remoteSearch.value.$refs.scrollbar.moveY) // 滚动条滚动的距离
    console.log(scrollHeight)
    console.log(36 * state.search.pageNum - 1)
    if (
      scrollHeight &&
      scrollHeight !== 0 &&
      scrollHeight > 36 * state.search.pageNum
    ) {
      loadMore()
    }
  }
}
const blurSelect = () => {
  if (options.value.length == 0) {
    console.log('清空2')
    options.value = []
    state.search.pageNum = 1
    state.search.name = ''
    getOrgList()
  }
}
const input = debounce(
  value => {
    console.log('输入查询')
    options.value = []
    state.search.pageNum = 1
    state.search.name = value.target.value
    loading.value = true
    get_zyz_list_select(state.search).then(res => {
      if (res.succeed) {
        currentPageData.value = res.data
        options.value = res.data
        loading.value = false
      }
    })
  },
  1000,
  false
)

const remoteMethod = query => {
  // console.log('查询')
  // if (query !== '') {
  //   getOrgList()
  // } else {
  //   options.value = []
  // }
}

const getOrgList = async () => {
  try {
    loading.value = true
    const res = await get_zyz_list_select(state.search)
    if (res.succeed) {
      currentPageData.value = res.data
      options.value.push(...res.data)
      loading.value = false
    }
  } catch (error) {
    console.log('error: ' + error)
  }
}

const change = val => {
  let target = []
  if(val && val.length >0){
    val.forEach(item => {
      target.push({
        id: item,
        name: options.value.find(item2 => item2.id === item).name
      })
    })
  }
  emit('update:value', val)
  emit('change', target)
}

onMounted(() => {
  getOrgList()
})
</script>

<style lang="scss">
.loading {
  margin: 0 auto;
  width: 20px;
  height: 20px;
}
.search-keyword {
  span {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    // padding-left: 20px;
    cursor: pointer;
    color: #087cd6;
  }
}
.search-keyword-bottom {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  // padding-left: 20px;
  color: #606266;
}
</style>
